<!-- 添加业绩 -->
<template>
  <div class="page-box h100 display-flex czbj">
      <p class="title-label">{{iscompile?"编辑":"添加"}}业绩</p>
      <div class="kjknsertw">
          <n-form ref="formRef" label-width="120" :inline="false" size="normal" label-placement="left" :model="formValue"
              :rules="rules">
              <n-grid :cols="24" :x-gap="20">
                  <n-form-item-gi span="24" label="业绩标题:" path="title" class="mt20">
                      <n-input v-model:value="formValue.title" type="text" placeholder="请输入业绩标题" size="medium"
                          clearable></n-input>
                  </n-form-item-gi>

             <n-form-item-gi span="24" label="封面:" path="cover" class="mt20">
                      <div class="kjjjmsertwe">
                          
                          <div class="logo-context vertical-center ab" @click="photoShowModal = true">
                              <img :src="formValue.cover" class="w100 h100 imgjz" v-if="formValue.cover" />
                              <span v-else>点击上传业绩封面</span>
                          </div>
                      </div>
                  </n-form-item-gi> 
                  <n-form-item-gi span="12" label="业绩分类:"  class="mt20">
                          <n-select v-model:value="formValue.classify" size="medium" :options="classifyoptions" clearable />
                          
                  </n-form-item-gi>
               
                  <n-form-item-gi span="24" label="详情介绍:" path="" class="mt20">
                      <div class="details-box">
                          <tinymce ref="tinymceref"></tinymce>
                      </div>
                      <div class="operating-button  mt20">
                          <n-button size="medium" type="primary" @click="addcpfun">{{iscompile?"保存":"添加"}}业绩</n-button>
                          <n-button size="medium" @click="callBack" class="ml10">返回</n-button>

                      </div>
                  </n-form-item-gi>
              </n-grid>
          </n-form>
      </div>

      <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
          <template #header>
              <div>业绩封面</div>
          </template>
          <div>
              <photoGallery @getImg="getImg" :types="'业绩封面' + Userid"></photoGallery>
          </div>
          <template #action>
              <div class="tr">
                  <n-button @click="photoShowModal = false"> 取消 </n-button>
                  <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
              </div>
          </template>
      </n-modal>
  </div>
</template>
<script lang='ts' setup>
import { dxget, dxpost, callBack,qurl } from "../../util";
import { ref } from "vue";
import photoGallery from "../../components/util/photoGallery";
import tinymce from "../../components/util/tinymce.vue"
const cz = qurl()
const photoShowModal = ref()
const classifyoptions = ref()
const tinymceref = ref()
const Userid = ref(localStorage.Userid)
const jhhjer = ref([])
const formRef = ref()
const iscompile = ref(false) // true为编辑的状态
const apiurl="skzn/companyPerformance"
const formValue = ref({
  title: "",//标题
  cover: "",//封面
  classify: "",
  particulars: "" //详情
})

const rules = {
  title: {
      required: true,
      message: '输入产品标题',
      trigger: 'blur'
  }
}
let jjnmnxe = "";
const getImg = (data) => {
  jjnmnxe = data;
};
const setImg = () => {
  formValue.value.cover = jjnmnxe
  photoShowModal.value = false;
};




const getfl = async () => {
    const { data }: any = await dxget("dxgjAdmin/getzd/getzdList", {
        ids: "268"
    })
    try{
        classifyoptions.value = JSON.parse(data[0].text)
        console.log(data.text);
    }catch(e){
        console.log(e);
    }
}
getfl()


const addcpfunser = async () => {
  formValue.value.particulars = tinymceref.value.getContent()
  formValue.value['detailedbrief'] = tinymceref.value.gettext().trim().slice(0,100)
  const { errno }: any = await dxpost(apiurl, formValue.value,iscompile.value?"put":"post")
  if (errno == 0) {
      window.$message.success("操作成功！")
      callBack()
  }
}
const addcpfun = (e) => {
  e.preventDefault();
  formRef.value.validate((errors) => {
      if (!errors) {
          addcpfunser()
      }
  });
}
const initData = async()=>{
  const {data}:any = await dxget(apiurl,{id:cz.id})
  console.log(data);
  formValue.value = data
  tinymceref.value.setContent(data.particulars)
}
if(cz.id){
  iscompile.value = true
  initData()
}


</script>
<style scoped>
.details-box {
  width: 1200px;
  height: 600px;
}

.page-box {
  overflow: auto;
  padding-bottom: 88px;
}
</style>